<template>
  <view class="review-item">
    <view class="review-header">
      <image class="review-avatar" :src="review.avatar" mode="aspectFill" />
      <view class="review-info">
        <view class="review-name">{{ review.username }}</view>
        <view class="review-meta">
          <view class="review-stars">
            <text 
              v-for="i in 5" 
              :key="i" 
              class="review-star" 
              :class="{ 'active': i <= review.rating }"
            >★</text>
          </view>
          <text class="review-time">{{ review.time }}</text>
        </view>
      </view>
    </view>
    
    <view class="review-content">{{ review.content }}</view>
    
    <view v-if="review.images && review.images.length > 0" class="review-images">
      <scroll-view scroll-x class="images-scroll-view" show-scrollbar="false">
        <view class="images-container">
          <image 
            v-for="(img, idx) in review.images" 
            :key="idx" 
            :src="img" 
            mode="aspectFill" 
            class="review-image"
            @click="handleImagePreview(idx)"
          />
        </view>
      </scroll-view>
    </view>
    
    <view v-if="review.reply" class="review-reply">
      <view class="review-reply__header">
        <text class="review-reply__label">商家回复</text>
      </view>
      <view class="review-reply__content">{{ review.reply }}</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  review: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['preview-image']);

const handleImagePreview = (index) => {
  if (props.review.images && props.review.images.length > 0) {
    emit('preview-image', props.review.images, index);
  }
};
</script>

<style lang="scss" scoped>
.review-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f2f2f2;
  transition: background-color 0.2s ease;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f9f9f9;
  }
}

.review-header {
  display: flex;
  margin-bottom: 12px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: 12px;
  border: 1px solid #f0f0f0;
}

.review-info {
  flex: 1;
}

.review-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-stars {
  display: flex;
}

.review-star {
  font-size: 14px;
  color: #e0e0e0;
  margin-right: 2px;
  
  &.active {
    color: #ffbc00;
  }
}

.review-time {
  font-size: 12px;
  color: #999;
}

.review-content {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* 评价图片 */
.review-images {
  margin-bottom: 12px;
}

.images-scroll-view {
  white-space: nowrap;
  width: 100%;
}

.images-container {
  display: inline-flex;
  padding-bottom: 4px;
}

.review-image {
  width: 100px;
  height: 100px;
  margin-right: 8px;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: transform 0.2s ease;
  
  &:last-child {
    margin-right: 0;
  }
  
  &:active {
    transform: scale(0.98);
  }
}

/* 商家回复 */
.review-reply {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
}

.review-reply__header {
  margin-bottom: 6px;
}

.review-reply__label {
  font-size: 13px;
  color: #999;
  font-weight: 500;
}

.review-reply__content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
</style>
